<template>
  <div class="program">
    <el-table
      :data="programs"
      style="width: 100%"
      :lazy="true"
      @row-dblclick="playMusicList"
    >
      <el-table-column prop="index" width="70"></el-table-column>
      <el-table-column label="操作" width="90">
        <template #default="scope">
          <a href="" class="iconn">
            <img
              :src="$filters.formatImgSize(scope.row.coverUrl, 40)"
              alt="404"
              style="width: 40px; height: 40px"
            />
            <i class="el-icon-caret-right playy"></i>
          </a>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="音乐标题"></el-table-column>
      <el-table-column prop="listenerCount" width="100">
        <template #default="scope">
          <span style="font-size: 13px"
            >播放:{{ $filters.formatPlays(scope.row.listenerCount) }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="likedCount" width="100">
        <template #default="scope">
          <span style="font-size: 13px">赞:{{ scope.row.likedCount }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="100">
        <template #default="scope">
          <span style="font-size: 13px">{{
            $filters.formatTime(scope.row.createTime)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="duration" label="时长" width="100">
        <template #default="scope">
          <span style="font-size: 13px">{{
            $filters.formatMusicTime(scope.row.duration)
          }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { getAnchorProgram } from '@/service/anchor'

const route = useRoute()
const store = useStore()
const id = ref(0)
id.value = Number(route.query.id)
//获取电台节目数据
const programs = ref([])
const nums = ref(1)
function getAnchors(id: number) {
  getAnchorProgram(id).then((res: any) => {
    programs.value = res.programs
    programs.value.map((item: any) => {
      item.index = nums.value++
    })
  })
}
getAnchors(id.value)
function playMusicList(row: any) {
  console.log(row)
}
</script>

<style scoped>
.iconn {
  position: relative;
}
.playy {
  font-size: 20px;
  color: #fff;
  position: absolute;
  top: -13px;
  left: 10px;
  border: 1px solid #fff;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
}
</style>
